<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>放大镜</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			div:nth-child(1) {
				width: 400px;
				height: 300px;
				outline: 10px blue solid;
				position: absolute;
			}
			
			div:nth-child(2) {
				width: 400px;
				height: 300px;
				outline: 10px red solid;
				position: absolute;
				left: 420px;
				background: url(img/1d.jpg) no-repeat;
			}
			
			#box1 {
				cursor: move;
			}
			
			section {
				position: relative;
				top: 60px;
				left: 50px;
			}
			
			span {
				display: block;
				width: 160px;
				height: 160px;
				background-image: url(img/2x2.png);
				position: absolute;
				right: 0px;
				bottom: 0px;
			}
		</style>
	</head>

	<body>
		<section>
			<div id="box1"> <img src="img/1.jpg"> <span></span> </div>
			<div id="box2"></div>
		</section>
		<h1 id="boxh1">111</h1>
		<script>
			var box1 = document.getElementById("box1");
			var box2 = document.getElementById("box2");
			var boxh1 = document.getElementById("boxh1");
			$w = 335 * 1.2;
			$h = 250 * 1.2;
			box1.onmousemove = function(ev) {
				var x = ev.clientX - 50;
				var y = ev.clientY - 60;
				var xp = x / $w * 100;
				var yp = y / $h * 100;
				var str = xp + "% " + yp + "%";
				boxh1.innerHTML = str;
				box2.style.backgroundPosition = str;
			}
		</script>
	</body>

</html>